<template>
  <el-drawer
    :title="textMap[dialogStatus]"
    :visible.sync="visibility"
    size="39%"
  >
    <el-form
      ref="dataForm"
      :model="temp"
      :rules="rules"
      label-position="right"
      label-width="120px"
      style="width: 600px"
    >
      <el-form-item label="供应商">
        {{ temp.supplierCode }}
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="原货号">
            {{ temp.originalGoodsCode }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原名称">
            {{ temp.originalGoodsName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="识别码" prop="goodsFullCode">
            <el-input
              v-model.trim="temp.goodsFullCode"
              :disabled="dialogStatus === 'update'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货号" prop="goodsCode">
            <el-input
              v-model.trim="temp.goodsCode"
              :disabled="dialogStatus === 'update'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="英文名称" prop="goodsName">
        <el-input v-model.trim="temp.goodsName" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="英文简称" prop="goodsAbbr">
            <el-input v-model.trim="temp.goodsAbbr" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中文名称">
            <el-input v-model.trim="temp.goodsChineseName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="分类" prop="category">
            <el-select v-model="temp.category">
              <el-option
                v-for="item in categoryOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位">
            <el-select v-model="temp.unit">
              <el-option
                v-for="item in unitOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="2-8 °C 保质期">
            <el-input
              v-model="temp.qualityGuaranteePeriod"
              :min="0"
              :max="999"
              type="number"
              style="width: 80px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位">
            <el-select v-model="temp.qualityGuaranteePeriodUnit">
              <el-option
                v-for="item in qualityGuaranteePeriodUnitOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="-20 °C 以下保质期">
            <el-input
              v-model="temp.freezeQualityGuaranteePeriod"
              :min="0"
              :max="999"
              type="number"
              style="width: 80px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位">
            <el-select v-model="temp.freezeQualityGuaranteePeriodUnit">
              <el-option
                v-for="item in qualityGuaranteePeriodUnitOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="配送说明">
            <el-select v-model="temp.deliveryRequirement">
              <el-option
                v-for="item in deliveryOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存储说明">
            <el-select v-model="temp.storageRequirement">
              <el-option
                v-for="item in storageOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="货期下限">
            <el-input
              v-model="temp.productionDateLower"
              :min="0"
              :max="999"
              type="number"
              style="width: 80px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="上限">
            <el-input
              v-model="temp.productionDateUpper"
              :min="0"
              :max="999"
              type="number"
              style="width: 80px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="单位">
            <el-select v-model="temp.productionDateUnit">
              <el-option
                v-for="item in productionDateUnitOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input v-model.trim="temp.memo" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogStatus === 'update' ? updateData() : createData()"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { saveGoods, updateGoods } from '@/api/base/goods.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentRow: {
      type: Object,
      default: null
    },
    dialogStatus: {
      require: true,
      type: String,
      default: 'create'
    },
    unitOptions: {
      type: Array,
      default: null
    },
    categoryOptions: {
      type: Array,
      default: null
    },
    qualityGuaranteePeriodUnitOptions: {
      type: Array,
      default: null
    },
    deliveryOptions: {
      type: Array,
      default: null
    },
    storageOptions: {
      type: Array,
      default: null
    },
    productionDateUnitOptions: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      temp: {},
      rules: {
        goodsFullCode: [
          { required: true, message: '产品长代码不能为空', trigger: 'blur' }
        ],
        goodsCode: [
          { required: true, message: '货号不能为空', trigger: 'blur' }
        ],
        goodsName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        goodsAbbr: [
          { required: true, message: '简称不能为空', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '分类不能为空', trigger: 'change' }
        ]
      },
      textMap: {
        create: '新增货品',
        update: '修改货品',
        copy: '新增货品'
      },
      loading: false
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        if (this.dialogStatus === 'update') {
          this.temp = Object.assign({}, this.currentRow)
        } else if (this.dialogStatus === 'copy') {
          this.temp = Object.assign({}, this.currentRow)
          this.temp.goodsId = null
          this.temp.goodsFullCode = null
        } else {
          this.temp = {}
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    createData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveGoods(this.temp)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('saveData', {})
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    updateData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateGoods(tempData)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('saveData', tempData)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

